<template>
    <div class="madp-pdfppt-list">
        <div class="madp-row">
            <h3>{{ publicList.title }}素材（共{{ publicList.publicData.length }}篇）</h3>
            <el-input
                maxlength="20"
                :placeholder="'请输入' + publicList.title + '标题'"
                class="madp-public-title"
                v-model.trim="inputValue"
                @change="searchTitleBlurFn"
                suffix-icon="el-icon-search"
            ></el-input>
        </div>
        <div class="madp-article-content">
            <div class="madp-add-content" @click="addPdf" v-if="permissions.cp_marketing_material_add">
                <i class="el-icon-circle-plus-outline"></i>
                <p>添加{{ publicList.title }}</p>
            </div>
            <div class="madp-add-content madp-add-list" v-for="(item, index) in publicList.publicData" :key="index">
                <div class="madp-add-release" v-show="item.marketingState == 1">
                    内容未发布 &nbsp;
                    <el-tooltip content="文章内容未进行发布审核，不支持发送给客户哦" placement="top" effect="light">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
                <div class="madp-add-release" v-show="item.marketingState == 3">
                    有修改内容未发布 &nbsp;
                    <el-tooltip content="文章内容未进行发布审核，不支持发送给客户哦" placement="top" effect="light">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
                <div class="madp-add list-title">{{ item.title }}</div>
                <div class="madp-add list-desc">{{ item.marketingSize }}</div>
                <svg class="madp-icon" aria-hidden="true">
                    <use xlink:href="#icon-yunpanlogo-3" v-show="publicList.title == '文档'" />
                </svg>
                <svg class="madp-icon" aria-hidden="true">
                    <use xlink:href="#icon-yunpanlogo-4" v-show="publicList.title == 'PDF'" />
                </svg>
                <svg class="madp-icon" aria-hidden="true">
                    <use xlink:href="#icon-yunpanlogo-1" v-show="publicList.title == 'PPT'" />
                </svg>
                <svg class="madp-icon" aria-hidden="true">
                    <use xlink:href="#icon-yunpanlogo-" v-show="publicList.title == '表格'" />
                </svg>
                <div class="madp-list-bottom">
                    <span>更新于{{ item.updateTime }}</span>
                    <i class="el-icon-edit" v-if="permissions.cp_marketing_material_edit" @click="editRow(item)"></i>
                    <i class="el-icon-delete" v-if="permissions.cp_marketing_material_del" @click="deleteRow(item)"></i>
                </div>
            </div>
        </div>
        <el-dialog :title="'添加' + publicList.title" v-if="dialogVisible" :visible.sync="dialogVisible" width="42%" :before-close="handleClose" :close-on-click-modal="false">
            <el-upload
                v-loading="loading"
                :accept="acceptFn"
                class="madp-upload"
                action="#"
                multiple
                :auto-upload="false"
                :limit="1"
                :show-file-list="false"
                :on-change="uploadChangeFile"
                :file-list="fileList"
            >
                <div v-if="!ruleForm.marketingUrl">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
                <div v-else class="madp-upload-suc">
                    <div class="madp-upload-suc-left" v-if="publicList.title == '表格'">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-" />
                        </svg>
                    </div>
                    <div class="madp-upload-suc-left" v-if="publicList.title == 'PDF'">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-4" />
                        </svg>
                    </div>
                    <div class="madp-upload-suc-left" v-if="publicList.title == 'PPT'">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-1" />
                        </svg>
                    </div>
                    <div class="madp-upload-suc-left" v-if="publicList.title == '文档'">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-3" />
                        </svg>
                    </div>
                    <div class="madp-upload-suc-right">
                        <div class="madp-upload-file-title">
                            <p>{{ ruleForm.title }}</p>
                            <p>{{ ruleForm.marketingSize }}</p>
                        </div>
                    </div>
                </div>
            </el-upload>
            <p class="madp-upload-title" v-if="publicList.title == 'PDF'">请选择上传不超过20M的PDF格式文件</p>
            <p class="madp-upload-title" v-if="publicList.title == 'PPT'">请选择上传不超过20M的PPT格式文件</p>
            <p class="madp-upload-title" v-if="publicList.title == '表格'">请选择上传不超过20M的Excel格式文件</p>
            <p class="madp-upload-title" v-if="publicList.title == '文档'">请选择上传不超过20M的WORD、TXT、CSV格式文件</p>
            <div class="madp-upload-pdf">
                <h4>{{ publicList.title }}追踪设置</h4>
                <div class="madp-upload-box">
                    <el-checkbox class="madp-upload-checkbox" v-model="ruleForm.trackBehavior"></el-checkbox>
                    <div class="madp-upload-p">行为通知(当客户点击{{ publicList.title }}时，发送{{ publicList.title }}的员工会收到消息提醒)</div>
                </div>
                <!-- <div class="madp-upload-box">
					<div class="madp-upload-p">动态通知(当客户点击{{ publicList.title }}时，会将客户的打开行为记录在客户动态里)</div>
				</div> -->
            </div>
            <div class="madp-element-button">
                <el-button type="primary" size="medium" @click="dialogVisiblecancelFn">取消</el-button>
                <el-button type="primary" size="medium" @click="saveForm(1)">保存</el-button>
                <el-button type="primary" size="medium" @click="saveForm(2)">保存即发布</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import '@/util/iconfont.js';
import { mapGetters } from 'vuex';
import {
    sysFileUpload,
    getPdfList,
    newAndEditPdf,
    deletePdf,
    newAndEditPpt,
    deletePpt,
    getPptList,
    newAndEditWord,
    deleteWord,
    getWordList,
    newAndEditExcel,
    deleteExcel,
    getExcelList,
    pdfRelease,
    pptRelease,
    wordRelease,
    excelRelease
} from '@/api/customer-into/marketing-material';
import { checkFileType } from '@/util/util';
export default {
    props: {
        getPublicList: {
            type: Object,
            required: true
        },
        activeObj: {
            type: Object,
            default: () => {
                return {
                    activeIndex: 0
                };
            }
        }
    },
    data() {
        return {
            // loading开关
            loading: false,
            // 文件数据
            publicList: [],
            // 弹窗开关
            dialogVisible: false,
            // 输入内容
            inputValue: null,
            ruleForm: {
                marketingUrl: '',
                trackBehavior: null, //PDF 通知设置
                trackDynamic: null, //PDF 通知设置
                title: null, //上传后的文件名称
                marketingSize: null, //上传后的文件大小
                changeTitle: 0 //0是新增 1是编辑
            },
            // 文件数据
            fileList: []
        };
    },
    watch: {
        activeObj() {
            if (this.activeObj.activeIndex > 1) {
                this.inputValue = '';
                this.getPdfListFn();
            }
        }
    },
    computed: {
        acceptFn() {
            if (this.publicList.title == 'PDF') {
                return '.pdf';
            } else if (this.publicList.title == 'PPT') {
                return '.pptx';
            } else if (this.publicList.title == '表格') {
                return '.xlsx,.xls';
            } else {
                return '.docx,.doc,.txt,.csv';
            }
        },
        ...mapGetters(['permissions'])
    },
    created() {
        this.publicList = this.getPublicList;
        this.getPdfListFn();
    },
    methods: {
        //确认
        saveForm(marketingState) {
            if (!this.ruleForm.marketingUrl) {
                this.$message.error('请上传' + this.publicList.title + '文件');
                return;
            }
            this.newAndEditPdfFn(marketingState);
        },
        //取消
        dialogVisiblecancelFn() {
            this.dialogVisible = false;
        },
        //上传海报
        addPdf() {
            this.ruleForm = {
                marketingUrl: '',
                trackBehavior: null, //PDF 通知设置
                trackDynamic: null, //PDF 通知设置
                title: null, //上传后的文件名称
                marketingSize: null, //上传后的文件大小
                changeTitle: 0
            };
            this.dialogVisible = true;
        },
        // 编辑
        editRow(row) {
            this.ruleForm = {
                marketingUrl: row.marketingUrl,
                trackBehavior: row.trackBehavior === 1 ? true : false, //PDF 通知设置
                trackDynamic: row.trackDynamic === 1 ? true : false, //PDF 通知设置
                title: row.title, //上传后的文件名称
                marketingSize: row.marketingSize, //上传后的文件大小
                changeTitle: 1,
                id: row.id
            };
            this.dialogVisible = true;
        },
        //删除海报
        deleteRow(row) {
            this.deletePdfFn(row.id);
        },
        //关闭弹框按钮
        handleClose() {
            this.ruleForm = {
                marketingUrl: '',
                trackBehavior: null, //PDF 通知设置
                trackDynamic: null, //PDF 通知设置
                title: null, //上传后的文件名称
                marketingSize: null, //上传后的文件大小
                changeTitle: -1
            };
            this.dialogVisible = false;
        },
        //上传文件时的改变
        uploadChangeFile(file) {
            if (file) {
                if (file.size > 20971520) {
                    this.$message.error('请上传不超过20M的文件');
                    this.fileList = [];
                    return;
                }
                const isOk = checkFileType(this.publicList.title, file);
                if (!isOk) {
                    this.$message.error('请上传正确的文件格式');
                    this.fileList = [];
                    return;
                }
                this.sysFileUploadFn(file);
            }
        },
        // pdf开始
        //新增海报 post 编辑链接 put
        newAndEditPdfFn(marketingState) {
            let obj = {
                title: this.ruleForm.title,
                classification: this.activeObj.id, //分类id
                marketingSize: this.ruleForm.marketingSize,
                marketingUrl: this.ruleForm.marketingUrl,
                trackBehavior: this.ruleForm.trackBehavior ? 1 : 0, //文章追踪-行为通知，0为未选中，1为选中，默认未选中
                trackDynamic: 1 //文章追踪-动态通知，0为未选中，1为选中，默认未选中
            };
            let func = null;
            if (this.publicList.title === 'PDF') {
                func = newAndEditPdf;
            } else if (this.publicList.title === 'PPT') {
                func = newAndEditPpt;
            } else if (this.publicList.title === '表格') {
                func = newAndEditExcel;
            } else if (this.publicList.title === '文档') {
                func = newAndEditWord;
            }
            if (this.ruleForm.changeTitle == 1) {
                obj.id = this.ruleForm.id;
            }
            func(obj, this.ruleForm.changeTitle == 0 ? 'post' : 'put').then((res) => {
                if (res.data.code === 0) {
                    if (marketingState !== 2) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                    }
                    if (marketingState === 1) {
                        this.dialogVisible = false;
                        this.getPdfListFn();
                    } else {
                        if (obj.id) {
                            this.publicReleaseFn(obj.id);
                        } else {
                            this.publicReleaseFn(res.data.data.id);
                        }
                    }
                }
            });
        },
        //发布
        publicReleaseFn(id) {
            let func = null;
            if (this.publicList.title === 'PDF') {
                func = pdfRelease;
            } else if (this.publicList.title === 'PPT') {
                func = pptRelease;
            } else if (this.publicList.title === '表格') {
                func = excelRelease;
            } else if (this.publicList.title === '文档') {
                func = wordRelease;
            }
            func(id).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        message: '保存并发布成功',
                        type: 'success'
                    });
                    this.dialogVisible = false;
                    this.getPdfListFn();
                }
            });
        },
        //海报分页查询
        getPdfListFn() {
            let obj = {
                title: this.inputValue,
                classification: this.activeObj.id
            };
            let func = null;
            if (this.publicList.title === 'PDF') {
                func = getPdfList;
            } else if (this.publicList.title === 'PPT') {
                func = getPptList;
            } else if (this.publicList.title === '表格') {
                func = getExcelList;
            } else if (this.publicList.title === '文档') {
                func = getWordList;
            }
            func(obj).then((res) => {
                if (res.data.code === 0) {
                    this.publicList.publicData = res.data.data;
                }
            });
        },
        //删除海报
        deletePdfFn(id) {
            let func = null;
            if (this.publicList.title === 'PDF') {
                func = deletePdf;
            } else if (this.publicList.title === 'PPT') {
                func = deletePpt;
            } else if (this.publicList.title === '表格') {
                func = deleteExcel;
            } else if (this.publicList.title === '文档') {
                func = deleteWord;
            }
            func(id).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getPdfListFn();
                }
            });
        },
        // 文件上传
        sysFileUploadFn(file) {
            this.fileList = [];
            let fd = new FormData();
            fd.append('file', file.raw);
            this.loading = true;
            sysFileUpload(fd)
                .then((res) => {
                    if (res.data.code === 0) {
                        let fileMsg = res.data.data;
                        this.ruleForm.title = fileMsg.original;
                        this.ruleForm.marketingUrl = fileMsg.url;
                        if (fileMsg.fileSize / 1024 / 1024 >= 1) {
                            this.ruleForm.marketingSize = (fileMsg.fileSize / 1024 / 1024).toFixed(2) + 'M';
                        } else {
                            this.ruleForm.marketingSize = (fileMsg.fileSize / 1024).toFixed(2) + 'KB';
                        }
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //模糊搜索
        searchTitleBlurFn() {
            this.getPdfListFn();
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-row {
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
}
.madp-article-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
    .madp-add-content {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 252px;
        min-height: 160px;
        height: fit-content;
        border: 1px solid #dcdfe6;
        margin: 10px;
        .el-icon-circle-plus-outline {
            font-size: 20px;
        }
    }
}
.madp-upload {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 200px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 0 auto;
}
.madp-add-list {
    position: relative;
    .madp-add-release {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        font-size: 12px;
        cursor: pointer;
        width: 48%;
        height: 20px;
        background: rgba(220, 223, 230, 0.8);
        text-align: right;
        border-radius: 2px;
    }
    .madp-add {
        position: absolute;
        top: 10px;
        left: 5px;
        width: 56%;
        height: 90px;
    }
    .list-title {
        font-size: 16px;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .list-desc {
        top: 35px;
    }
    .madp-list-image {
        position: absolute;
        top: 10px;
        width: 100px;
        height: 80px;
        right: 0;
    }
    .madp-list-bottom {
        height: fit-content;
        width: 100%;
        font-size: 0.75rem;
        border-top: 0.0625rem solid #dcdfe6;
        display: flex;
        padding: 6px 6px 0 0;
        position: absolute;
        bottom: 0;
        left: 0;
        justify-content: space-between;
        span {
            margin-left: 5px;
        }
        .el-icon-edit {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
        .el-icon-delete {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
        .el-icon-refresh {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
        &-btns {
            display: flex;
        }
    }
}
.madp-element-button {
    text-align: center;
    margin-top: 20px;
}
.madp-upload-pdf {
    width: 100%;
    margin-top: 10px;
    .madp-upload-box {
        margin: 10px 0;
        .madp-upload-p {
            width: 100%;
            margin-left: 5px;
        }
    }
}
.madp-upload-title {
    text-align: center;
    margin: 5px 0;
}
.el-icon-upload {
    position: relative;
}
.madp-upload-box {
    display: flex;
}
.madp-icon {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 6em;
    height: 6em;
    fill: currentColor;
}
.madp-upload-suc {
    display: flex;
    height: 100%;
    &-left {
        width: 30%;
        position: relative;
        .icon {
            fill: currentColor;
            overflow: hidden;
            width: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    &-right {
        flex: 1;
        position: relative;
        width: 200px;
        .madp-upload-file-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }
    }
}
.madp-public-title {
    width: 20%;
}
</style>
